<script setup>
import { reactive, ref } from "vue";
import {Button, Popup, Form, CellGroup, Field, Radio, RadioGroup, Uploader, Toast, Image} from "vant";
import { Local } from "@/utils/storage";
import {getOssPrefix} from "@/v-api/properties";
import {register, uploadPic} from "@/v-api/login";
import {perfect} from "@/v-api/my";

const userInfo = Local.get('userInfo')
const url = getOssPrefix()+userInfo.iconUrl;
const perfectForm = reactive({
  id: userInfo.userId,
  gender: 1,
  name: "",
  subject: ""
});
const repassword = ref('');
const showFile = ref([]);
const afterRead = async(file) => {

  perfectForm.iconUrl=await uploadPic(file);
  Local.set('iconUrl',perfectForm.iconUrl);
};

const onOversize = (files) => {
  Toast(`文件大小不能超过 ${files[0].maxSize / 1024}MB`);
};
</script>

<template>
    <div>
      <div class="profile-container">
        <Image
            round
            fit="cover"
            class="custom-border-image"
            width="150px"
            height="150px"
            :src="url"
        />
      </div>
      <Form @submit="perfect(perfectForm)">
        <Field label-width="6em" label-align="left" v-model="userInfo.username" label="用户名" required size="large"/>
        <Field label-width="6em" label-align="left" v-model="userInfo.phone" label="手机号" required size="large"/>
      <Field label-width="6em" label-align="left"
             v-if="userInfo.role === 3" v-model="userInfo.userId"
             name="学号" label="学号" required size="large"/>
<!--      <Field v-if="userInfo.role === 3" :clearable="true"-->
<!--             v-model="perfectForm.address" name="所属班级"-->
<!--             label="所属班级" placeholder="请输入班级" required/>-->
      <Field label-width="6em" label-align="left"
             v-if="userInfo.role === 1" :clearable="true"
             v-model="perfectForm.subject" name="任教科目"
             label="任教科目" placeholder="请输入科目"
             :rules="[{ required: true, message: '请填写科目' }]"
             required size="large"/>
      <Field label-width="6em" label-align="left"
             :clearable="true" v-model="perfectForm.name"
             name="真实姓名" label="真实姓名" placeholder="请输入姓名"
             :rules="[{ required: true, message: '请填写姓名' }]"
             required size="large"/>
<!--        <Field :clearable="true" v-model="perfectForm.address"-->
<!--               name="具体地址" label="具体地址" placeholder="请输入地址"/>-->
      <Field  label-width="6em" label-align="left" label="性别" size="large">
        <template #input>
          <RadioGroup v-model="perfectForm.gender" direction="horizontal" icon-size="15px">
            <Radio name="1">女</Radio>
            <Radio name="2">男</Radio>
          </RadioGroup>
        </template>
      </Field>
      <div style="margin: 20px;">
          <Button type="success" native-type="submit" size="large" color="#a4d43f">
            保存
          </Button>
        </div>
      </Form>
    </div>
</template>

<style scoped>
.profile-container {

  height: 200px;
  background-image: url("@/assets/images/bg.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;

}
.custom-border-image {
  border: 10px solid #d9f2ac; /* 设置边框粗细和颜色 */
  box-sizing: border-box; /* 确保边框宽度不会增加元素的尺寸 */
}
</style>